<template>
  <div class="container">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <h2>客户经理</h2>
        <el-cascader
          ref="refSubCat"
          size="small"
          :options="options"
          :props="{ checkStrictly: true, emitPath: false }"
          clearable
          placeholder="选择地区"
          @change="selec"
          v-model="selectSearch"
          clearCheckedNodes="getBusinessList"
          style="margin-right: 10px; margin-left: 20px; margin-top: 20px"
        ></el-cascader>
        <div>
          <el-input
            v-model="search"
            clearable
            placeholder="请输入姓名或手机号"
            @clear="getBusinessList"
            size="small"
            style="width: 70%; margin-right: 10px; margin-top: 20px"
          ></el-input>
          <el-button
            @click="found"
            type="primary"
            size="small"
            style="margin-right: 10px; margin-top: 20px"
            >查询</el-button
          >
        </div>
      </div>
      <div style="margin-right: 40px">
        <el-popover
          trigger="click"
          title="邀请"
          width="380"
          class="popover"
          placement="bottom"
        >
          <div style="text-align: left; padding: 25px 15px">
            <el-select v-model="select" slot="append">
              <el-option
                v-for="(item, index) in copy"
                :label="index == 0 ? '学校相关人员' : '其他相关人员'"
                :value="item.key"
                :key="index"
              ></el-option>
            </el-select>
            <el-button slot="append" type="primary" @click="share"
              >复制链接</el-button
            >
          </div>

          <el-button
            size="small"
            type="primary"
            style="margin-top: 20px"
            slot="reference"
            >点击复制分享链接
          </el-button>
        </el-popover>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
    >
      <el-table-column
        prop="boDistrict"
        label="客户地区"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boName"
        label="客户名称"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boLinkName"
        label="联系人"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boLinkPhone"
        label="联系人手机号"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boFeedback"
        label="反馈信息"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boBudget"
        label="预算金额/预备申请预算金额"
        width="width"
        align="center"
      >
      </el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  AreaList,
  BusinessList,
  shareUrl,
} from "@/api/school/regionalManager/index.js";
import Decrypt from "@/utils/Decrypt";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      options: [],
      visible: false,
      select: "",
      disable: false,
      total: -1,
      page: {
        pageSi: 10,
        pageNo: 1,
      },
      tableData: [],
      isLoading: false,
      dialogVisible: false,
      search: "",
      selectSearch: "",
      copy: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getBusinessList();
    this.getAreaList();
    this.getSelect();
  },
  methods: {
    selec(value) {
      // this.selectSearch = this.$refs["refSubCat"].getCheckedNodes()[0].label;
      this.getBusinessList();
    },
    found() {
      this.getBusinessList();
    },

    share(val) {
      // 模拟 输入框
      let cInput = document.createElement("input");
      let website = JSON.stringify(this.select);
      let website1 = website.substr(1); //删除首字符
      let website2 = website1.substring(0, website1.length - 1); //删除最后末字符
      cInput.value = website2;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
    getSelect() {
      let data = {
        uId: this.$store.state.user.USER_INFO.id,
      };
      shareUrl(data).then((res) => {
        if (res.code == 200) {
          for (let i in res.result) {
            this.copy.push({ key: res.result[i] });
          }
          this.copy.reverse();
          this.select = this.copy[0].key;
        }
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    //区域下拉
    getAreaList() {
      AreaList().then((res) => {
        if (res.code == 200) {
          let arr = res.result;
          let arr1 = [];
          arr.map((value, index, arry) => {
            arr1.push({
              label: value.regionName,
              value: value.regionCode,
              parentRegionCode: value.parentRegionCode,
              children: value.childList.map((item) => ({
                ...item,
                label: item.regionName,
                value: item.regionCode,
                children: item.childList.map((v) => ({
                  ...v,
                  label: v.regionName,
                  value: v.regionCode,
                })),
              })),
            });
          });
          this.options = arr1;
        }
      });
    },
    //商机列表
    getBusinessList() {
      let data = {
        bouId: this.$store.state.user.USER_INFO.id,
        ...this.page,
        boName: this.search,
        boDistrictCode: this.selectSearch,
      };
      this.isLoading = true;
      BusinessList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.map((item) => ({
            ...item,
            boLinkPhone: Decrypt(item.boLinkPhone),
          }));
          this.total = res.total;
          this.isLoading = false;
        }
      });
    },

    changeSize(size) {
      this.page.pageSi = size;
      this.getBusinessList();
    },
    changePage(page) {
      this.page.pageNo = page;
      this.getBusinessList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .el-form-item__label {
  padding-left: 60px;
}
::v-deep .el-input__inner {
  border-radius: 4px 0px 0px 4px;
}
::v-deep .el-button {
  border-radius: 0px 4px 4px 0px;
}
::v-deep .el-popover {
  border-radius: 30px;
}
</style>
